js实现数组中的字符串按长度排序,长度一样按字母顺序排序。

一、 按数组中字符串长度排序

1. 升序
function sortArray(array) {
 array.sort((a, b) => a.length - b.length)
 return array
}
console.log(sortArray(["a", "banana", "app", "appl", "ap", "apply", "apple"]));
// ['a', 'ap', 'app', 'appl', 'apply', 'apple', 'banana']
2. 降序
function sortArray(array) {
 array.sort((a, b) => b.length - a.length)
 return array
}
console.log(sortArray(["a", "banana", "app", "appl", "ap", "apply", "apple"]));
// ['banana', 'apply', 'apple', 'appl', 'app', 'ap', 'a']

二、先按字符串长度排序,再按字母表顺序排序。

1. 代码
function sortArray(array) {
 array.sort((a, b) => {
  if (a.length !== b.length) {
   return a.length - b.length
  } else {
   return a.localeCompare(b);
  }
 return array
}
console.log(sortArray(["a", "banana", "app", "appl", "ap", "apply", "apple"]));
// ['a', 'ap', 'app', 'appl', 'apple', 'apply', 'banana']
2. 解析

1)说明
localeCompare() 方法返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。

新的 locales 和 options 参数能让应用程序定制函数的行为,即指定用来排序的语言。 locales 和 options 参数完全取决于实现,在旧的实现中忽略这两个参数。

2)语法
referenceStr.localeCompare(compareString[, locales[, options]])

3)localeCompare()官方描述

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1.运行环境 本书7~10章所附代码的运行环境 Windows家族,.NET Framework 2.0及以上版本 IIS 5.0及以上版本 本书14~16章所附代码的运行环境 Windows家族,Apache 2.0及以上版本 PHP 5.0及以上版本 本书17~18章所附代码的运行环境 Windows家族,Tomcat JDK6.0 本书19~21章所附代码的调试环境 IE 6.0及以上版本 2.调试环境 本书7~10章所附代码的调试环境 Windows家族,.NET Framework 2.0及以上版本 Visual Studio 2005及以上版本、ASP.NET 2.0及以上版本 本书14~16章所附代码的调试环境 Windows家族,Apache 2.0及以上版本 PHP 5.0及以上版本 本书17~18章所附代码的调试环境 JDK6.0 Eclipse3.2+Lomboz 本书19~21章所附代码的调试环境 IE 6.0及以上版本 文本编辑器 3.本书所附光盘范例 第7章(/07/) DataTypeApplication/Default.aspx 检查和转换数据 第8章(/08/) StringApplication/StringDealwith.aspx 字符串处理 StringBuilderApplication/DealWithStringBuilder.aspx 动态字符串处理 第9章(/09/) RegexApplication/Default.aspx 正则表达式类的应用 RegexApplication/GetPageHtmlData.aspx 获取网页的内容 第10章(/10/) ASPNETValidator/Compare.aspx 比较验证 ASPNETValidator/CompareCheck.aspx 数据类型检查 ASPNETValidator/CompareValue.aspx 值比较验证 ASPNETValidator/CustomClient.aspx 自定义客户端验证 ASPNETValidator/CustomServer.aspx 自定义服务器端验证 ASPNETValidator/NotNull.aspx 非空验证 ASPNETValidator/NotNullInitValue.aspx 不等于初始化值的验证 ASPNETValidator/RangeDate.aspx 日期范围验证 ASPNETValidator/RangeInt.aspx 整数范围验证 ASPNETValidator/RangeLetter.aspx 字母范围验证 ASPNETValidator/REDate.aspx 日期格式验证 ASPNETValidator/REEmail.aspx 电子邮件格式验证 ASPNETValidator/REIdentity.aspx 身份证号码格式验证 ASPNETValidator/REInt.aspx 整数格式验证 ASPNETValidator/RENumber.aspx 数值格式验证 ASPNETValidator/REPhone.aspx 电话号码格式验证 ASPNETValidator/REUrl.aspx URL地址格式验证 ASPNETValidator/SummaryDialog.aspx 对话框式验证摘要 ASPNETValidator/SummaryPage.aspx 网页式验证摘要 第11章(/11/) 判断是否为对象.asp 判断是否为对象 判断是否为数值.asp 判断是否为数值 判断是否为数组.asp 判断是否为数组 判断是否为日期.asp 判断是否为日期 判断是否为空.asp 判断是否为空 判断是否为空值.asp 判断是否为空值 获取变量类型信息.asp 获取变量类型信息 第12章(/11/) 从中截取字符串.asp 从中截取字符串 切分字符串.asp 切分字符串 删除字符串前后导空格.asp 删除字符串前导空格.asp 删除字符串后导空格.asp 反向截取字符串.asp 反向查找字符串.asp 字符串倒序排列.asp 字符串大写转化.asp 字符串小写转化.asp 字符串替换.asp 将数组元素连接为字符串.asp 构造制定字符串.asp 正向截取字符串.asp 正向查找字符串.asp 获取字符串长度.asp 第13章(/14/) Matches集合与Macth对象.asp 指定忽略大小写.asp 获取Matches集合.asp 进行正则匹配替换.asp 进行正则匹配检验.asp 第14章(/14/) 浮点型数据测试.php 浮点型数据测试 字符串数据测试.php 字符串数据测试 数组数据测试.php 数组数据测试 对象测试.php 对象测试 数据类型识别.php 数据类型识别 强制类型转化.php 强制类型转化 计算圆周面积程序.php 计算圆周面积程序 字符串转化.php 字符串转化 数值转化.php 数值转化 数组转化.php 数组转化 第15章(/15/) 计算字符串长度.php 计算字符串长度 访问单个字符.php 访问单个字符 检索字符的位置.php 检索字符的位置 截取子字符.php 截取子字符 查找字符串出现的次数.php 查找字符串出现的次数 替换子字符串.php 替换子字符串 按照特定字符进行分割.php 按照特定字符进行分割 按照指定数目进行分割.php 按照指定数目进行分割 删除字符串的空白.php 删除字符串的空白 字符串的填补.php 字符串的填补 字符串大小写的转换.php 字符串大小写的转换 字符串的反转.php 字符串的反转 字符串按ASCII码顺序比较.php 字符串按ASCII码顺序比较 字符串按“自然排序”法比较.php 字符串按“自然排序”法比较 根据单词的发音比较.php 根据单词的发音比较 根据单词的相似性比较.php 根据单词的相似性比较 查找子字符串.php 查找子字符串 搜寻出现的字符.php 搜寻出现的字符 字符匹配.php 字符匹配 字符替换.php 字符替换 字符串翻译.php 字符串翻译 格式化数字.php 格式化数字 格式化表单字符串.php 格式化表单字符串 24.php 格式化字符串 25.php 格式化HTML实体 26.php HTML标签的清理 解析URL字符串.php 解析URL字符串 解析查询字符串.php 解析查询字符串 URL编码处理.php URL编码处理 查询字符串的构造.php 查询字符串的构造 第16章(/16/) 字符串模式匹配.php 字符串模式匹配 字符串大小模式匹配.php 字符串大小模式匹配 日期字符串模式匹配.php 日期字符串模式匹配 模式替换.php 模式替换 模式分割.php 模式分割 正则表达式匹配.php 正则表达式匹配 其他的正则表达式匹配.php 其他的正则表达式匹配 取得正则表达式的全部匹配.php 取得正则表达式的全部匹配 返回与模式匹配的数组单元.php 返回与模式匹配的数组单元 正则表达式的替换.php 正则表达式的替换 正则表达式的拆分.php 正则表达式的拆分 表单验证.php 表单验证 UBBCode.php UBB代码 ubb.html UBB代码输入界面 ubb.php UBB代码输出界面 Apache日志分析.php Apache日志分析 第17章(/17/) JSPExample1.jsp JSP页面中整型数据的使用 JSPExample2.jsp JSP页面中循环输出整型数据 JSPExample3.jsp 计算一光年的距离 JSPExample4.jsp JSP页面中计算圆的面积 JSPExample5.jsp JSP页面中字符数据的简单使用 JSPExample6.jsp 结合布尔类型变量判断学生成绩等级 JSPExample7.jsp text.html页面提交至该页,并显示提交数据 text.html 页面数据提交至JSPExample7.jsp JSPExample8.jsp 不同类型混合运算自动转换 JSPExample9.jsp 不同类型混合运算强制转换 JSPExample10.jsp 字符串类型与其他数据类型的转换 JSPExample11.jsp 解析字符串的子字符串 stringOP.html 页面数据提交至JSPExample12.jsp JSPExample12.jsp 字符串替换 JSPExample13.jsp 字符串大小写转换、反转等操作 logon.html 页面数据提交至JSPExample14.jsp JSPExample14.jsp 字符串数据的比较 JSPExample15.jsp 字符串数据的连接 JSPExample16.jsp 字符串数据的格式化 第18章(/18/) 1.jsp Pattern对象使用split方法示例一 2.jsp Pattern对象使用split方法示例二 3.jsp Matcher对象使用appendReplacement方法示例 4.jsp Matcher对象使用groupCount方法示例 5.jsp Matcher对象使用find方法示例 6.jsp Matcher对象使用group方法示例 7.jsp 字符串对象使用split方法 8.jsp Matcher对象使用replaceAll方法示例 9.html 页面数据提交至9.jsp 9.jsp 利用正则表达式验证邮箱地址 10.html 页面数据提交至10.jsp 10.jsp 利用正则表达式验证URL地址 11.html 页面数据提交至11.jsp 11.jsp 利用正则表达式验证电话号码 第20章(/20/) 从字符串中提取子串(1).html 从字符串中提取子串(1) 从字符串中提取子串(2).html 从字符串中提取子串(2) 从字符串中提取子串(3).html 从字符串中提取子串(3) 删除或替换数组中部分数据.html 删除或替换数组中部分数据 删除数组中最后一个元素.html 删除数组中最后一个元素 删除数组中的第一个元素.html 删除数组中的第一个元素 反序排列数组中的元素.html 反序排列数组中的元素 在字符串上加入超级链接.html 在字符串上加入超级链接 在字符串两端加上小字体标记.html 在字符串两端加上小字体标记 在字符串两端加入上标标签.html 在字符串两端加入上标标签 在字符串两端加入下标标签.html 在字符串两端加入下标标签 在字符串两端加入斜体标签.html 在字符串两端加入斜体标签 在字符串两端加入锚点标志.html 在字符串两端加入锚点标志 在字符串的两端加上固定宽度字体标记.html 在字符串的两端加上固定宽度字体标记 在字符串的两端加上粗体标志.html 在字符串的两端加上粗体标志 在字符串的两端加入下划线标记.html 在字符串的两端加入下划线标记 在指定字符串的两端加上大字体标志.html 在指定字符串的两端加上大字体标志 在数组前面插入数据.html 在数组前面插入数据 对数组中的元素进行排序.html 对数组中的元素进行排序 将一个或多个字符串连接到当前字符串的末尾.html 将一个或多个字符串连接到当前字符串的末尾 将字符串分割并存储到数组中.html 将字符串分割并存储到数组中字符串转化为大写格式.html 将字符串转化为大写格式 将字符串转化为小写格式.html 将字符串转化为小写格式 将指定的数据添加到数组中.html 将指定的数据添加到数组中 将数组元素连接为字符串.html 将数组元素连接为字符串 替换字符串中指定的内容.html 替换字符串中指定的内容 根据指定的Unicode编码返回一个字符串.html 根据指定的Unicode编码返回一个字符串 比较两个字符串的大小.html 比较两个字符串的大小 获取字符串长度.html 获取字符串长度 获取指定位置的字符的Unicode编码.html 获取指定位置的字符的Unicode编码 获取指定字符(串)第一次在字符串中出现的位置.html 获取指定字符(串)第一次在字符串中出现的位置 获取数组中的一部分数据.html 获取数组中的一部分数据 设置字符串输出时的前景色.html 设置字符串输出时的前景色 设置字符串输出时的字体大小.html 设置字符串输出时的字体大小 返回一个包含数组中全部数据的字符串.html 返回一个包含数组中全部数据的字符串 返回字符串中指定位置处的字符.html 返回字符串中指定位置处的字符 连接其他数组到当前数组末尾.html 连接其他数组到当前数组末尾 第21章(/21/) 判断字符串中是否存在匹配内容.html 判断字符串中是否存在匹配内容 对字符串进行匹配检测.html 对字符串进行匹配检测 替换字符串中的指定内容.html 替换字符串中的指定内容 编译正则表达式.html 编译正则表达式 获取与正则表达式进行匹配检测的字符串.html 获取与正则表达式进行匹配检测的字符串 获取匹配内容右侧的字符信息.html 获取匹配内容右侧的字符信息 获取匹配内容左侧的字符信息.html 获取匹配内容左侧的字符信息 获取匹配的内容的最后一个索引位置.html 获取匹配的内容的最后一个索引位置 获取子匹配的结果.html 获取子匹配的结果 获取字符串中所有的匹配信息.html 获取字符串中所有的匹配信息 获取最近一次匹配的内容.html 获取最近一次匹配的内容 获取最近一次匹配的最后一个子匹配.html 获取最近一次匹配的最后一个子匹配 获取第一次匹配的起始位置(1).html 获取第一次匹配的起始位置(1) 获取第一次匹配的起始位置(2).html 获取第一次匹配的起始位置(2)
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 定义网页的关键字 1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 取得控件的绝对位置 2.8 删除时的确认提 示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页效果的公告栏 2.16 动态设置控件的事件 第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 3.29 光标停在文字最后 3.30 分行取textarea中的值 3.31 自动插入文本 3.32 选取textarea的指定行 3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器 第4章 鼠标特效 4.1 禁用鼠标右键 4.2 使鼠标滚轮失效 4.3 状态栏显示鼠标位置 4.4 点击鼠标右键到指定页 4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 图片跟随鼠标 4.14 围绕鼠标的文本 4.15 鼠标旁边的提示信息 4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox鼠标移入移出的特效 第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 定义网页的关键字 1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 取得控件的绝对位置 2.8 删除时的确认提示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页效果的公告栏 2.16 动态设置控件的事件 第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 3.29 光标停在文字最后 3.30 分行取textarea中的值 3.31 自动插入文本 3.32 选取textarea的指定行 3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器 第4章 鼠标特效 4.1 禁用鼠标右键 4.2 使鼠标滚轮失效 4.3 状态栏显示鼠标位置 4.4 点击鼠标右键到指定页 4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 图片跟随鼠标 4.14 围绕鼠标的文本 4.15 鼠标旁边的提示信息 4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox鼠标移入移出的特效 第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 下拉框式网站导航 6.14 综合的搜索引擎 6.15 经典的ListView列表框 第7章 键盘操作和状态栏特效 7.1 按功能键返回首页 7.2 回车实现Tab键功能 7.3 Ctrl+Enter提交数据 7.4 IE中屏蔽退格建(Back Space) 7.5 屏蔽键盘所有键 7.6 JavaScript捕获方向键 7.7 状态栏变化信息 7.8 状态栏的跑马灯效果 7.9 状态栏缩放文字 7.10 状态栏文字来回出现 7.11 交替闪烁的状态栏 7.12 状态栏的分解显示文本特效 7.13 状态栏文字从右弹出 7.14 状态栏中文字从中间分开显示 7.15 屏蔽掉IE自带的功能键 第8章 链接特效 8.1 关闭窗口的链接 8.2 不用CSS实现链接样式的变化 8.3 让链接没有下划线 8.4 去掉超链接点击时的框 8.5 显示页面中所有链接 8.6 一个链接打开两个地址 8.7 为链接提供下拉菜单 8.8 按钮链接 8.9 弹出鼠标所指的链接地址 8.10 链接的注释 8.11 为超链接同时绑定单击和双击事件 8.12 带链接的滚动字幕 8.13 会跳舞的链接 8.14 检测站点的连接速度 8.15 文本链接的渐变效果 第9章 表格特效 9.1 用table做的镜框 9.2 全自动单元格 9.2 突出的表格 9.3 让表格有提示信息 9.4 闪亮的表格边框 9.5 表格的宽度固定后内容自动换行 9.6 表格的排序 9.7 表格的斜线 9.8 table中的文字滚动 9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时获取表格的宽度 9.16 表格选中后变色 9.17 表格中隐藏下级表格 9.18 表格自动下移 9.19 动态创建固定列数的表格 9.20 动态改变表格列宽 9.21 动态改变表格的行顺序 9.22 动态生成包含合并单元格的表格 9.23 用键盘上下键实现表格行的上下选择 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果(一) 9.38 类C# GridView的编辑效果(二) 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选框求和 10.4 复选框组选 10.5 复选框分组全选 10.6 复选框和文本框的联动效果 10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两个checkbox互斥问题 10.10 使用checkbox控制文本框 10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框的反选 10.14 选中所有复选框 10.15 复选框全选(二) 10.16 改变slsect选中项的颜色特效 第11章 颜色处理和菜单特效 11.1 背景颜色测试 11.2 RGB颜色在线转换 11.3 颜色切换板 11.4 下拉菜单 11.5 左键弹出式菜单 11.6 目录样式的下拉菜单 11.7 网页中的选项卡 11.8 静态导航菜单 11.9 烟花效果的下拉菜单 11.10 网络导航条 11.11 隐藏式菜单 11.12 仿flash菜单 11.13 滚动导航菜单 11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的方法 12.6 关闭窗口时的提示 12.7 定时弹出窗口 12.8 调整窗口的大小 12.9 打开的窗口居中 12.10 打开窗口的等待提示 12.11 在打开的窗口中返回数据 12.12 创建弹出窗口 12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口为活动窗口 12.17 页面随窗口的改变而改变 12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的警告框 12.22 屏蔽状态栏的错误提示 12.23 获取模式窗口的值 第13章 日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期特效 13.3 最简单的获取时间的方法 13.4 随日期变换的文本 13.5 输入框的默认值为今天 13.6 时间相加 13.7 5秒后消失的广告 13.8 12小时制和24小时制的转换 13.9 标题栏显示时间 13.10 超过时间页面自动跳转 13.11 分时段问候用户 13.12 获取服务器时间 13.13 倒计时显示 13.14 背景时钟 13.15 计算某天星期几 13.16 计算时间差 13.17 计算网页停留时间 13.18 记录页面的修改时间 13.19 将日期转换为字符串的方法 13.20 检测是否是闰年 13.21 年份加减函数 13.22 精确到千分之一秒 13.23 离开某天的时间 13.24 判断两个字符串日期的大小 13.25 显示登录时间 13.26 中文日期样式(一) 13.27 中文日期样式(二) 13.28 状态栏动态显示时间 13.29 页面访问时间限制 13.30 显示英文上、下午的时间 13.31 用JavaScript制作的特色时钟 13.32 自定义的日历 13.33 生日提醒器 13.34 时间的倒影 13.35 使用正则表达式验证日期 13.36 全面的日期选择功能 13.37 全球的时间查看表 13.38 无刷新定时取数据 13.39 取当月的最后一天 第 14章 数字、数组和统计函数特效 14.1 边打字边显示字数 14.2 创建随机数 14.3 JavaScript创建二维数组 14.4 截断小数点位数 14.5 删除数组中指定元素 14.6 数字选中后放大 14.7 统计字符数的方法 14.8 JavaScript遍历数组 14.9 获取字符串型数组下标的数组长度 14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 14.20 小写金额转换为大写 14.21 通过两点坐标计算直线距离 14.22 随机抽取彩票 14.23 实时计算折扣 14.24 实用计算器 14.25 前面补0的方法 第15章 图形、图像的特效 15.1 图片变形效果 15.2 图像的翻转效果 15.3 图像的模糊效果 15.4 图像的水印效果 15.5 图形淡出淡隐 15.6 图像的渐隐播放效果 15.7 文字环绕图片 15.8 切换图片的特殊效果 15.9 晃动的图片 15.10 定时消失的图片 15.11 QQ图像一闪一闪的效果 15.12 设置textarea中的图片不处于编辑状态 15.13 禁止图像的拷贝 15.14 LOGO像雪花一样落下 15.15 多幅图片分页滚动显示 15.16 循环滚动显示图片 15.17 图片的选择展示 15.18 163图片新闻切换效果 15.19 判断上传图片的大小 15.20 上传图片时预览 15.21 对联广告 15.22 带关闭的对联广告 15.23 到边界反弹的漂浮图片 15.24 用键盘控制图片移动 15.25 预装载图片提高站点速度 15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第16章 页面数据的验证 16.1 验证字符串是否全由数字组成 16.2 验证表单项必须填写 16.3 判断用户输入是否为中文 16.4 验证列表框中的值是否重复 16.5 检测输入框的统一方法 16.6 Email的验证 16.7 不使用正则验证IP地址 16.8 IP地址输入框 16.9 判断变量是否已经定义 16.10 判断方法是否已经定义 16.11 表单验证样式(一) 16.12 判断表单是否已修改 16.13 判断控件的类型 16.14 密码强度检查 16.15 身份证的验证 16.16 JavaScript生成验证码 16.17 JavaScript生成验证码(二) 第17章 进度条、滚动条特效处理 17.1 使用符号制作的进度条 17.2 用table制作的进度条 17.3 CSS+JS制作的进度条(一) 17.4 CSS+JS制作的进度条(二) 17.5 进度条形式的下载效果 17.6 滑动条(一) 17.7 滑动条(二) 17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试代码(三) 18.4 多选考试题 18.5 在线心理测试脚本 18.6 电脑检测健康情况 第19章 文件处理和打印的技巧 19.1 判断上传文件的类型 19.2 改变上传文件控件的样式 19.3 上传文件一次完成 19.4 使用正则判断文件扩展名 19.5 多附件上传效果 19.6 上传控件内容清空 19.7 textarea显示记事本文件的内容 19.8 使用FSO读写文本文件 19.9 自动启动文件下载 19.10 创建Excel文件 19.11 JavaScript导出数据到Excel 19.12 JavaScript读取自身文件内的XML 19.13 将XML文件绑定到table 19.14 使用JavaScript加载XML文件 19.15 动态加载JavaScript文件 19.16 防止JavaScript文件被其他站直接引用 19.17 检查机器是否安装Word 19.18 打印当前页 19.19 打印预览 19.20 隐藏不想打印的页面内容 19.21 使用ExecWB直接打印 19.22 动态绑定XML文件 19.23 Kill Excel的进程 第20章 调用操作系统的应用 20.1 Javascript操作剪贴板 20.2 打开硬盘驱动器 20.3 单击加入收藏夹 20.4 复制标题和网址 20.5 关闭输入法 20.6 检测屏幕分辨率 20.7 检测系统信息 20.8 显示本地计算机信息 20.9 检测浏览器浏览过的站点数 20.10 IE文件菜单中的打开命令 20.11 打开Internet选项对话框 20.12 打开Windows系统的画板 20.13 弹出保存对话框 20.14 进入页面弹出收藏夹 20.15 执行客户端的可执行程序 20.16 自动调用OutLook发送邮件 20.17 弹出窗口选择颜色 20.18 弹出框式邮件发送 20.19 把网站作为用户的Active桌面 20.20 判断是否安装了flash插件 第21章 流行技术:DOM和userData的应用技巧 21.1 使用userData保存文本内容 21.2 使用userData保存select标记 21.3 使用userData保存checkbox标记 21.4 使用DOM实现控件的替换 21.5 使用DOM实现控件的复制 21.6 使用DOM判断页面中控件是否嵌套 21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用:AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效(二) 22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果的字符串过滤 22.6 Gmail右上角的Loading效果 22.7 使用XMLHTTP获取天气预报 22.8 拖拽任意对象 22.9 避免打开无效页面 22.10 用JavaScript调用Google AdSense 22.11 Ajax效果:可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性的对象 22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及特效 23.1 最简单的漂移特效 23.2 JavaScript遍历对象中的所有属性 23.3 QQ在线客服 23.4 查看网站的排名 23.5 定义全局变量 23.6 动态生成金字塔效果 23.7 动态修改CSS的样式 23.8 根据浏览器不同设置CSS 23.9 汉字按拼音排序 23.10 划词搜索 23.11 加载大量input控件的快速方法 23.12 简繁体转换 23.13 将HTML转换为JavaScript脚本 23.14 脚本永不出错 23.15 进入网站的签名程序 23.16 浏览器毁灭者 23.17 罗列对象的属性和值 23.18 密码保护页 23.19 全角转半角 23.20 全屏广告 23.21 输入的英文自动全大写 23.23 特殊扩散效果 23.24 提交信息等待界面 23.25 同时调用两个方法 23.26 自定义错误处理样式 23.27 FTP网站登录
Javascript Basic 1、Javascript 概述(了解) Javascript,简称为 JS,是一款能够运行在 JS解释器/引擎 中的脚本语言 JS解释器/引擎 是JS的运行环境: 1、独立安装的JS解释器 - NodeJS 2、嵌入在浏览器中的JS解释器 JS的发展史: 1、1992年 Nombas 开发了一款语言 ScriptEase 2、1995年 Netscape(网景) 开发了一款语言 LiveScript,更名为 Javascript 3、1996年 Microsoft(微软) 开发了一款语言 JScript 4、1997年 网景 将Javascript 1.1 提供给了ECMA(欧洲计算机制造商联合会),ECMA 获取了 JS 的核心,称之为 ECMA Script (ES) 完整的JS组成: 1、核心(ES) 2、文档对象模型(Document Object Model) - DOM 允许让 JS 与 HTML 文档打交道 3、浏览器对象模型(Browser Object Model) - BOM 允许让 JS 与 浏览器进行交互 JS是一款基于对象的编程语言 2、JS的基础语法 1、浏览器内核 内核负责页面内容的渲染,由以下两部分组成: 1、内容排版引擎 - 解析HTML/CSS 2、脚本解释引擎 - 解析Javascript 2、搭建JS运行环境(重点) 1、独立安装的JS解释器 - NodeJS console.log("Hello World"); console.log('Hello World'); 2、使用浏览器中的内核(JS解释引擎) 1、在浏览器的控制台(Console)中,输入脚本并执行 2、将JS脚本代码嵌入在HTML页面中执行 1、采用HTML元素事件执行JS代码 事件 : 1、onclick 当元素被点击时执行的操作 ex: 当按钮被点击时,在控制台中输出 Hello World 2、将JS脚本编写在 [removed][removed] 并嵌入在HTML文档的任何位置 [removed] console.log("... ..."); [removed]("Hello Wolrd"); [removed] 3、将JS脚本编写在外部独立的JS脚本文件中(***.js) 步骤: 1、编写JS脚本文件 2、在HTML中引入脚本文件 [removed][removed] 练习: 1、先创建一个 base.js 的文件 2、在文件中执行以下代码 console.log(" .... ... "); [removed](" ... ... "); window.alert("这是在外部脚本文件中的内容"); 3、在 html 文档中,引入 base.js 文件 3、JS调试 当代码编写出现错误时,在运行的时候,在错误位置会停止 碰到错误代码,会终止当前语句块的执行,但不影响后续块的执行 [removed][removed] 为一块 4、JS语法 1、语句 - 可以被JS引擎执行的最小单元 由表达式、关键字、运算符 来组成的 严格区分大小写 :name 和 Name 所有的语句都是以 ; 来表示结束 所有的标点符号都是英文的 ; 和 ; . 和 。 : 和 : " 和 “ ' 和 ‘ () 和 () [] 和 【】 {} 和 {} 2、注释 单行注释: // 多行注释: /* */ 3、变量 与 常量 1、变量 1、什么是变量 用来存储数据的一个容器 2、声明变量(重点) 1、声明变量 var 变量名; 2、为变量赋值 变量名=值; 3、声明变量并赋初始值 var 变量名=值; 注意: 1、变量在声明时没有赋值的话,那么值为 undefined 2、声明变量允许不使用var关键字,但并不推荐 练习: 1、创建一个网页 04-variable.html 2、声明一对 [removed][removed],并完成以下变量的声明 1、声明一个变量用于保存用户的姓名,并赋值为 "张三丰"; 2、声明一个变量用于保存用户的年龄,赋值 68 3、如何 将变量的数据 打印在控制台上?? 4、一条语句中声明多个变量 var 变量名1=值,变量名2=值,变量名3; 3、变量名命名规范 1、由字母,数字,下划线以及 $ 组成 var user_name; 正确 var user-name; 错误 var $uname; 正确 2、不能以数字开头 var 1name;错误 3、不能使用JS中的关键字 和 保留关键字 4、变量名不能重复 5、可以采用"驼峰命名法",小驼峰命名法使用居多 6、最好见名知意 var a; var uname; 4、变量的使用 1、为变量赋值 - SET操作 只要变量出现在 赋值符号(=)的左边一律是赋值操作 var uname="张三丰"; uname="张无忌"; 2、获取变量的值 - GET操作 只要变量没有出现在赋值符号(=)的左边,一律是取值操作 var uname="wenhua.li";//赋值操作 console.log(uname); var new_name = uname; new_name 是赋值操作 uname 是取值操作 uname = uname + "bingbing.fan"; 赋值符号出现的话,永远都是将右边的值,赋值给左边的变量(从右向左运算) 2、常量 1、什么是常量 在程序中,一旦声明好,就不允许被修改的数据 2、声明常量 const 常量名=值; 常量名在命名时采用全大写形式 作业: 1、声明一个变量 r ,来表示一个圆的半径,并赋值 2、声明一个常量PI ,来表示圆周率3.14 3、通过 r 和 PI 来计算 该圆的周长,保存在变量l中 周长 = 2 * π * 半径 4、通过 r 和 PI 来计算 该圆的面积,保存在变量s中 面积 = π * r * r; 5、在控制台中打印输出 半径为 * 的圆的周长是 * 半径为 * 的圆的面积是 * 笔记本名称:ThinkPad E460 笔记本价格:3000 笔记本库存:100台 1、运算符 1、位运算符 1、作用 将数字转换为二进制后进行运算 只做整数运算,如果是小数的话,则去掉小数位再运算 2、位运算 1、按位 与 :& 语法 :a & b 特点 :将 a 和 b 先转换为二进制,按位比较,对应位置的数字都为1的话,那么该位的整体结果为1,否则就为0 ex:5 & 3 5 :101 3 :011 =========== 001 结果 :1 使用场合:任意数字与1做按位与操作,可以判断奇偶性,结果为1,则为奇数,否则为偶数 0 :0 1 :1 2 :10 3 :11 4 :100 5 :101 5 & 1 101 001 ========== 001 4 & 1 100 001 ==== 000 2、按位 或 :| 语法 :a | b 特点 :将 a 和 b 转换为 二进制,按位比较,对应位置的数字,至少有一位为1的话,那么该为的整体结果就为1,否则为 0 ex : 5 | 3 101 011 ======== 111 结果为 :7 适用场合:任何小数与0 做 按位或的操作,可以快速转换为整数(并非四舍五入) 5 | 0 101 000 ==== 101 3、按位 异或 :^ 语法:a ^ b 特点:将 a 和 b 先转换为二进制,按位操作,对应位置上的两个数字,相同时,该位整体结果为0,不同时,该位的整体结果为 1 使用场合:快速交换两个数字 5 ^ 3 101 011 ========== 110 结果为 6 练习: var a = 5; var b = 3; a = a ^ b; b = b ^ a; a = a ^ b; console.log(a,b); 3、赋值 和 扩展赋值运算符 1、赋值运算符 := 2、扩展赋值运算符 +=,-=,*=,/=,^=,... ... a += b; ==> a = a + b; a = a + 1; ==> a += 1; ==> a++ ; ==> ++a 3、练习 1、从弹框中,分两次输入两个数字,分别保存在 a 和 b中 2、如果 a 大于 b的话 ,则交换两个数字的位置 使用 短路&&,扩展赋值运算符,位运算 4、条件运算符(三目运算) 单目(一元)运算符 :++,--,! 双目(二元)运算符 :+,-,*,/,%,>,= 18 ? "你已成年" : "你未成年"; 练习: 从弹框中录入一个数字表示考试成绩(score) 如果 成绩为 100 分 ,提示 :满分 如果 成绩 >= 90 分 ,提示 :优 如果 成绩 >= 80 分 ,提示 :良 如果 成绩 >= 60 分 ,提示 :及格 否则 :提示 不及格 2、函数 1、什么是函数 函数(function),是一段预定义好,并且可以被反复使用的代码块 预定义好 :事先声明,但不是马上执行 反复使用 :可以被多次调用 代码块 :包含多条可执行的语句 2、函数的声明与调用 1、普通函数 语法: function 函数名(){ 语句块; } 调用:在JS中任何的合法位置处,都可以通过 函数名() 的方式进行调用 练习: 1、声明一个函数,名称为 change 2、在函数中 1、通过弹框,分两次,录入两个数字,保存在 a 和 b 2、先打印 a 和 b的值 3、如果 a > b 的话,则交换两个数字的位置 4、再打印 a 和 b的值 3、在网页中,创建一个按钮,点击按钮时,完成 change 函数的调用 2、带参函数 1、定义语法: function 函数名(参数列表){ 语句块; } 参数列表: 可以由0或多个参数的名称来组成,多个参数的话中间用 , 隔开 定义函数时的参数列表,都称为 "形参(形式参数)" 2、调用语法 任意合法JS位置处 函数名(参数列表); 调用函数时,所传递的参数列表,称之为"实参(实际参数)" 3、练习 1、定义一个函数 change ,该函数中接收两个参数(a,b) 2、在函数体中,如果 a 大于 b的话,则交换两个数字的位置,再打印输出结果 3、通过一个按钮调用函数,并且将 两个数字传递给函数 4、常用带参函数 parseInt(变量); parseFloat(变量); Number(变量) console.log(""); 3、带返回值的函数 var result = parseInt("35.5"); 1、什么是返回值 由函数体内 带到 函数体外的数据,叫做"返回值" 2、语法 function 函数名(参数列表){ 语句块; return 值; } 允许通过一个变量来接收调用函数后的返回值 var 变量名 = 函数名(实参列表); 3、练习 定义一个可以接收三个Number参数的方法(名称为getMax),在该方法中,计算并返回 最大的数值 3、作用域 1、什么事作用域 指的是变量和函数的可访问范围,作用域分为以下两类 1、函数作用域 只在定义的函数内允许访问变量 和 函数 2、全局作用域 一经定义,在任何位置处都能访问 2、函数作用域中的变量 在某个函数中声明的变量,就是函数作用域中的变量,也可以称之为 "局部变量"。 function calSum(){ var a = 3; var b = 5; console.log(a,b); // 输出 3 5 } console.log(a,b); //错误,因为 a ,b已经出了它的定义范围 练习: 1、定义一个 函数calSum,声明两个变量a,b,并赋值,并且在函数内打印两个变量 2、定义一个 函数calMax,直接打印输出 a,b,观察结果 3、全局作用域中的变量 一经声明了,任何位置都能使用。也称为 "全局变量" 声明方式: 1、将变量声明在最外层,所有的function之外 [removed] var a = 15; var b = 18; function showMsg(){ console.log(a); console.log(b); } [removed] 2、声明变量时,不使用var关键字,一律是全局变量,但有风险 建议: 全局变量 ,尽量都声明在 所有的 function 之外 声明变量时,也一律都使用 var 关键字 4、声明提前 Q : function show(){ console.log(num);//报错 } 1、什么是声明提前 JS程序在正式执行前,会将所有var声明的变量以及function声明的函数,预读到所在作用域的顶端。但赋值还保留在原位置上 2、建议 最好将变量的声明 和 函数的声明都集中到所在作用域的最顶端 5、按值传递 Q : function change(a,b){ a ^= b; b ^= a; a ^= b; console.log("在change函数中"); console.log(a,b); } function testChange(){ var a = 15; var b = 18; console.log("调用前:"); console.log(a,b);//15 18 change(a,b); console.log("调用后:"); console.log(a,b);//15 18 } 1、什么是按值传递 基本数据类型的数字在做参数传递时,实际上时传递的实参的副本到函数中,原始数据并未发生过改变 2、建议 基本数据类型的数据在做参数传递时,尽量不要在函数中修改,因为即便修改,也不会影响原数据的 6、局部函数 将函数 再声明在某个函数内,就是局部函数 [removed] function show(){ function inner(){ console.log("show 中的 inner 函数"); } inner();//正确 } inner(); // 错误,inner 是局部函数,只能在 show中被调用 [removed] 7、全局函数 ECMAScript预定义的全局函数,可供用户直接使用 1、paseInt(); 2、parseFloat(); 3、Number(); 4、isNaN(); 5、encodeURI() URL:Uniform Resource Locator :统一资源定位符/器 URI:Uniform Resource Identifier : 统一资源标识符 1、作用 对统一资源标识符格式的字符串进行编码,并返回编码后的字符串 编码:将多字节的字符,编译成多个单字节的字符 6、decodeURI() 1、作用 对已编码的URI进行解码(将已编码内容再转换回中文) 7、encodeURIComponent() 在 encodeURI 基础之上,允许将 特殊符号(:,/,...) 进行编码 8、decodeURIComponent() 9、eval() 作用:计算并执行以字符串方式表示的JS代码 var msg = "console.log('Hello World');"; eval(msg);//将 msg 作为 JS代码去执行 练习: 1、创建页面,通过弹框,输入一段JS代码 2、通过 eval() ,将输入的JS代码执行一次 3、递归调用 1、什么是递归 递归指的是在一个函数中,又一次的调用了自己 2、递归的实现 1、边界条件 2、递归前进 - 继续调自己 3、递归返回 - 向上返回数据 3、解决问题 1、计算某个数字的阶乘 5的阶乘 5!=5*4*3*2*1 5! = 5 * 4! 4! = 4 * 3! 3! = 3 * 2! 2! = 2 * 1! 1! = 1 /*计算 n 的阶乘*/ function f(n){ ... ... } 4、作业 已知下列数列 (菲波那切数列) 1,1,2,3,5,8,13,21,34,55,... ... 已知 第一个数为1,第二个数为1 从第三个数开始,每个数字等于前两个数之和 问题:通过一个函数,求某个位置上的数字(用递归实现) https://www.baidu.com/s?wd=佳能 https://www.baidu.com/s?wd=尼康 function test(){ console.log("Hello World"); } var result = test(); console.log(result); =========================== 输出结果: Hello World undefined [removed] var g_uname = "sanfeng.zhang"; function showName(){ var uname = "wuji.zhang"; console.log(uname);//wuji.zhang } [removed] function test(){ console.log(num); // 打印 :undefined var num = 15; } 演变成: function test{ var num; // 先声明,但不赋值(自动完成) console.log(num); // 打印 :undefined num=15;// 只赋值,不声明 } 推荐写法: function test(){ var num = 15; console.log(num); // 打印 :15 } *********************************************** 作业: 1,1,2,3,5,8,13,21,34,55,... ... 已知: 该数列中前两个数都是 1 从第三个数开始,每个数字等于前两个数的和 /*通过 f 函数,计算第 n 个数字是多少*/ function f(n){ } f(5) : 求第五个数字是多少 ================================================= 1、分支(选择)结构 1、流程控制结构 1、顺序结构 - 自顶向下的执行 2、分支结构 - 有条件的选择某一段代码去执行 3、循环结构 - 有条件的选择某一段代码反复执行 程序 = 数据结构 + 算法 2、练习 编写一个收银柜台收款程序,根据商品单价,购买数量以及收款金额计算并输出应收金额和找零 数据:商品单价,购买数量,收款金额,应收金额,找零 输入数据:商品单价(price),购买数量(count),收款金额(money) 输出数据:应收金额(total),找零(change) Q : 当商品总价>=500时,享受8折优惠 3、if 结构 语法: if(条件){ 满足条件要执行的语句块 } 流程: 1、判断条件 2、如果条件为真,则执行 语句块 中的内容 3、如果条件为假,则跳过语句块去执行其他内容 注意: 1、if中的条件,最好是一个boolean的值,如果不是boolean类型,则会自动转换 以下情况,条件会自动转换为 false if(0) if(0.0) if(undefined) if(null) if("") if(NaN) if(35.5){ //真 } var num; if(num){ //假 } if("李文华真帅"){ //真 } 2、if 后的 { } 是可以被省略的,如果省略的话,只控制 if 下的第一条语句 问题:考虑异常情况,如果收款金额小于应收金额 如果 收款金额大于等于应收金额,则正常执行 否则 则给出异常提示 4、if ... else ... 结构 语法: if(条件){ 满足条件时,执行的语句块 }else{ 不满足条件时,执行的语句块 } 练习: 1、从弹框中,输入一个年份信息 2、判断该年是否为闰年,并给出提示 输入年:2009 2009年不是闰年 输入年:2012 2012年是闰年 5、if ... else if ... 结构 语法: if(条件1){ //满足条件1时,要执行的语句块 }else if(条件2){ //满足条件2时,要执行的语句块 }else if(条件n){ //满足条件n时,要执行的语句块 }else{ //以上条件都不满足时,要执行的语句块 } 练习: 从弹框中,分三次录入 年,月,日 判断该日是该年的第多少天 提示: 1,3,5,7,8,10,12 :每月31天 4,6,9,11 :每月30天 2 :闰年29天,平年28天 2017年8月21日 : 31+29+31+30+31+30+31+21 6、switch ... case Q : 从弹框中录入 1-7 中的任一一个数字 录入 1 :输出 :今天吃红烧肉 录入 2 :输出 :今天吃红烧排骨 录入 3 :输出 :今天吃红烧丸子 录入 4 :输出 :今天红烧鱼 录入 5 :输出 :今天吃烤羊腿 录入 6 :输出 :今天休息 录入 7 :输出 :今天休息 场合:等值判断 语法: switch(变量){ case 常量值1: 语句块1; break;//通过 break 结束switch的执行(可选 ) case 常量值2: 语句块2; break;//可选 default: 语句块n; break;//可选 } 练习: 1、使用 特殊的 switch 结构完成下列要求 输入年 ,月 输出 该月有多少天 1,3,5,7,8,10,12 : 31天 4,6,9,11 : 30 天 2 : 平年28天,闰年29天 ex: 年:2017 月:5 输出:31天 1、使用 特殊的 switch 结构完成下列要求 2、改版日期计算器(难度) 输入年月日,判断该日是这一年的多少天 var month = Number(prompt()); var totalDays = 0; switch(month-1){ case 11: totalDays += 30; case 10: totalDays += 31; case 9: totalDays += 30; ... ... } 2、循环结构 1、问题 1、控制台上打印一句Hello World 2、控制台上打印十句Hello World 3、控制台上打印10000句 Hello World 4、改版第3步,增加 第 ? 句 Hello World 第 1 句 Hello World 第 2 句 Hello World ... 第 10000 句 Hello World 5、改版第4步 将 Hello Word 替换成 "你好 世界" 练习: 6、打印输出 1-100之间所有数字的和 2、什么是循环结构 循环,就是一遍又一遍的执行相同或相似的代码 两个重要的要素: 1、循环条件 :循环执行的次数 2、循环操作 :循环体,要执行相同 或 相似的代码是什么 3、while 循环 1、语法 while(条件){ //循环操作 } 流程: 1、判断条件 2、如果条件为真,则执行循环操作,然后再次判断条件。当条件为假时,则退出循环结构 4、循环的流程控制语句 1、break 破坏了整个循环的执行 - 结束循环 2、continue 结束本次循环,继续执行下次循环 练习: 1、使用 continue ,打印输出 1-100之间所有偶数的和 2、让用户循环从弹框录入信息,并将信息打印在控制台上,直到用户输入 exit 为止 输入数据:sanfeng.zhang sanfeng.zhang 输入数据:wuji.zhang wuji.zhang 输入数据:exit 3、猜数字游戏 1、随机生成一个 1-100 之间的数字 Math.random() 返回 0-1 之间的小数 var r = parseInt(Math.random()*100)+1; 2、要求用户输入一个整数 若比生成的随机数大,则输出 “猜大了” 若比生成的随机数小,则输出 “猜小了” 直到用户 猜对为止 3、如果用户输入exit ,也可以退出游戏 3、作业 用户从弹框中输入年,月,日,判断该日是星期几? 1900年1月1日 是星期1 推荐思路: 从1900年1月1日 到 输入的年月日 共有多少天求出来,与 7 取余 1、通过一个循环计算从1900年 到输入年前一年有多少天? 2、再从1月,到输入月份的前一个月共有多少天? 3、再累加 输入的日 4、用整体结果 与7取余,给出提示 附加作业: 将 输入的月份的日历打印输出 2017年8月 日 一 二 三 四 五 六 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 while(i > 0){ switch(i){ case 1: console.log(); break; case 2: console.log(); continue; // 作用在 while } } switch(i){ case 1: console.log(); continue; // 错误 } =================================================== 1、循环结构 1、do ... while() do{ 循环操作 }while(循环条件); do...while VS while 1、while 先判断条件,再执行循环操作 如果条件不满足,循环一次都不执行 2、do ... while 先执行循环操作,再判断循环条件 即便条件不满足,也要执行一次循环操作 练习: 将猜数字的游戏,改版成 do ... while 循环版本 2、for() 循环 1、语法 for(表达式1;表达式2;表达式3){ //循环操作 } 表达式1:循环条件的声明 表达式2:循环条件的判断(boolean) 表达式3:更新循环条件(i++,... ...) 执行过程: 1、计算表达式1的值 2、计算表达式2的值,如果结果为true则执行循环体,否则退出 3、执行循环体 4、执行表达式3 5、再计算表达式2的值,为true执行循环体,否则退出 while do...while 和 for 的使用场合: 1、while 和 do...while 适合使用在不确定循环次数的循环下 2、for 适合使用在确定循环次数时使用 练习: 1、定义一个函数,打印乘法口诀表中的任一一行 输入要打印的行数:5 1*5=5 2*5=10 3*5=15 4*5=20 5*5=25 2、定义一个函数,打印 1/1+1/3+1/5+...1/999的和 3、定义一个函数,判断指定的数字是否为素数 素数:只能被1 和 它本身整除的数字 输入一个数字:7 是素数 循环条件:从 2 开始 ,到输入的数字-1结束 循环操作:判断输入的数字能否被循环条件整除,能被整除,则不是素数,不能被整除,是素数 4、有一对兔子,从出生后的第3个月起都生一对兔子,小兔子长到第3个月后每个月又生一对兔子,假如兔子都不死的话,打印输出 前10个月,每个月有多少对兔子 n1 n2 n1 n2 n1 n2 1 , 1 , 2 , 3 , 5 , 8 , 13 , 21 , 34 , 55 2、三个表达式的特殊用法 1、for(;;) 三个表达式可以任意的省略,不推荐省略 2、for 第一个 和 第三个表达式的多样化 for(var i=1,j=2;i=1;i++,j--){ console.log(i+"+"+j+"="+(i+j)); } 3、嵌套循环 在一个循环的内部又出现一个循环 for(var i=0;i<10;i++){ // 外层循环 for(var j=0;j<10;j++){ // 内层循环 } } 外层循环执行一次,内层循环要执行一轮 练习: 1、控制台中输出下面的图形 ****** ****** ****** ****** ****** * ** *** **** ***** * *** ***** ******* ********* 2、数组 1、什么是数组 数组,即一组数据,使用一个变量来存放多个数据 数组中的元素是按照"线性"书序来排列的,所以也可以称之为是一个 "线性表" 2、声明数组 1、声明一个空数组变量 var 数组名 = []; 2、声明数组并赋初始值 var 数组名 = [数据1,数据2,数据3,... ...]; 3、声明一个空数组变量 var 数组名 = new Array(); 4、声明一个数组并赋初始值 var 数组名 = new Array(数据1,数据2,... ...); 练习: 1、创建一个函数,分别用两种不同的方式创建数组(arr1,arr2) arr1保存 :张三丰,张翠山,张无忌 arr2保存 :金花婆婆,殷素素,赵敏 2、直接将数组打印在控制台上 3、数组是引用类型的对象 引用类型的对象,是将数据保存在 "堆" 中的 在"栈"中,会对 "堆" 中数据的地址进行引用 1、将数组赋值给其它变量时,实际赋的是数组的地址 练习: 1、创建一个数组 arr1 ,包含"张无忌","赵敏" 2、将 arr1 赋值给 arr2 3、将 arr2 的第一个元素更改为 "金花婆婆",打印输出 arr1 和 arr2 中的所有元素 2、数组在做参数的时候,传递进去的实际上是地址(按引用传递 即 按地址传递) 练习: 1、创建一个数组array,保存"张无忌","赵敏"俩元素 2、创建一个函数change,接收一个数组作为参数,在函数体内,将第一个元素更改为"金花婆婆" 3、调用change函数,并将array数组作为参数,调用完成后,打印array的值,观察结果 4、修改change函数,在函数体内,将传递进来的数组重新new一个Array("孙悟空","猪八戒") 5、重复步骤三,观察结果 3、null 表示的是让引用类型的对象不再指向任何空间.一般用于主动释放对象的空间 //让 array 指向数组的地址 var array = ["wuji.zhang","zhaomin"]; //释放 array空间,不再指向任何地址 array = null; 4、访问数组的元素 赋值,取值,都是使用 下标 来完成的 1、为数组的元素赋值 数组名[下标] = 值; var array = ["张无忌","赵敏"]; array[1] = "周芷若"; array[2] = "小昭";//增加一个新元素,在第3个位置处 array[5] = "灭绝师太"; 2、获取数组中的值 数组名[下标]; 3、length属性 作用:获取数组的长度(数组中元素的个数) 1、允许将数组的length属性值设置为0,来完成数组元素的清空操作 2、配合循环 做数组的循环遍历操作 var array = ["张无忌","赵敏"]; 输出: 第1名 :张无忌 第2名 :赵敏 for(var i=0;i"sanfeng.zhang"]; 用字符串做下标,就是关联数组 var array = []; //声明一个空数组 array["西游记"] = "古代神话故事"; array["红楼梦"] = ["贾宝玉","林黛玉","刘姥姥"]; Q : array.length 注意: 1、关联数组是不算做数组内容的,不记录到 length 中 2、关联数组只能通过 字符串 做下标取值 3、允许通过 for...in 来循环遍历关联数组的字符串下标(也能遍历出内容的数字下标) 3、冒泡排序 [23,9,78,6,45] -> [6,9,23,45,78] 冒泡排序:车轮战,两两比较,小的靠前 特点: 1、轮数 :共比较了 length - 1 轮 2、每轮中比较的次数 :随着轮数的增加,次数反而减少 代码: 双层循环表示整个排序的过程 1、外层循环 :控制比较的轮数,从1开始,到length-1(能取到)结束 2、内层循环 :控制每轮中比较的次数,并且也要表示参与比较的元素的下标,从0开始,到 length-1-i(轮数变量) [23,9,78,6,45] 共5个元素 外层:从 1 开始,到 4 结束 内层: 第一轮 第一次:从 0 开始 ,到 3 结束 第二轮 第一次:从 0 开始 ,到 2 结束 ... ... 2、数组的常用方法 1、toString() 将一个数组转换为字符串 语法:var str = 数组对象.toString(); 2、join() 作用:将数组中的元素通过指定的分隔符连接到一起,并返回连接后的字符串 语法:var str = 数组对象.join("&"); 练习:(10分钟) 1、使用数组实现由 * 组成的三角形 直角三角形,等腰三角形 * ** *** **** ***** 2、使用数组实现 九九乘法表 3、连接数组 函数:concat() 作用:拼接两个或更多的数组,并返回拼接后的结果 语法:var result=arr1.concat(arr2,arr3,arr4); 注意: 1、concat不会改变现有数组,而是返回拼接后的 2、每个参数不一定非是数组,也可以是普通的数据 练习: 1、声明两个全局数组,分别保存一些国家的名称 数组1:选中的国家 sel = ["中国","美国","俄罗斯","日本"]; 数组2:备选国家 unsel=["朝鲜","越南","老挝","柬埔寨"]; 2、将 备选国家 全部移入到 入选国家中,打印数据 结果: sel = ["中国","美国","俄罗斯","日本","朝鲜","越南","老挝","柬埔寨"]; unsel=[]; 4、获取子数组 函数:slice() 作用:从指定数组中,截取几个连续的元素组成的新数组 语法:arr.slice(start,[end]); start:从哪个下标处开始截取,取值为正,从前向后取,取值为负,从后向前算位置。 0 1 2 3 var arr=["中国","美国","日本","英国"]; -4 -3 -2 -1 end : 指定结束处的下标(不包含),该参数可以省略,如果省略的话,就是从start一直截取到结束 注意: 1、该函数不会影响现有数组,会返回全新的数组 练习: var arr=["中国","美国","日本","英国"]; 取出 美国 和 日本 组成的一个子数组 5、修改数组 函数:splice() 作用:允许从指定数组中,删除一部分元素,同时再添加另一部分元素 语法: arr.splice(start,count,e1,e2,... ...); start:指定添加或删除元素的起始位置/下标 count:要删除的元素个数,取值为0表示不删除 e1,e2,... ... : 要增加的新元素,允许多个 返回值:返回一个由删除元素所组成的数组 注意:splice 会改变现有数组 练习: 在 sel 和 unsel 的基础上完成下列操作 1、从备选国家中(unsel),选择一个国家移入到 选中的国家(sel) 推荐步骤: 1、用户输入 :越南 从 unsel 中将越南移除 再将 越南 sel 的末尾处 2、用户输入 :墨西哥 提示:国家不存在 6、数组的反转 作用:颠倒数组中元素的顺序 语法:arr.reverse(); 注意:该函数会改变当前数组的内容 练习: 1、声明一个整数数组 2、倒序打印输出内容(使用reverse()) 7、数组排序 函数:sort(); 语法:arr.sort(排序函数); 作用:默认情况下,按照元素的Unicode码大小按升序排列 特殊:允许自己指定排序函数,从而实现对数字的升序和降序的排列 语法:arr.sort(排序函数); ex: var arr = [12,6,4,72,115,89]; //排序函数(升序) function sortAsc(a,b){ return a-b; } arr.sort(sortAsc); 原理: 1、指定排序函数 如 sortAsc,定义 两个参数,如 a 和 b。数组会自动传递数据到 sortAsc 里面去,如果返回值是>0的数,则交换两个数的位置,否则不变 使用匿名函数完成排序: arr.sort(function(a,b){return a-b;}); 练习: 1、声明一个整数数组,随意定义数字 2、页面上添加两个按钮,一个"升序"按钮,一个"降序"按钮 3、点击 升序 按钮时,数组按升序排序,并打印 4、点击 降序 按钮时,数组按降序排序,并打印 8、进出栈操作 JS是按照标准的"栈式操作"访问数组的 所有的"栈式操作"的特点都是"后进先出" "栈式操作"讲究的"入栈"和"出栈" 1、push() 入栈,在栈顶(数组的尾部)添加指定的元素,并返回新数组的长度 var arr = [10,20,30]; //向栈顶增加新数据 40 var len = arr.push(40); //len 保存的是 40 入栈后 arr 的长度,值是4 2、pop() 出栈,删除并返回栈顶的(数组尾部)元素 var arr = [10,20,30]; var r1 = arr.pop();//arr = [10,20] var r2 = arr.pop();//arr = [10] ============================== arr : r1 : 30 r2 : 20 3、shift() 删除数组头部的(第一个)元素并返回 var arr = [10,20,30]; var r1 = arr.shift(); ============================ arr : [20,30] r1 : 10 4、unshift() 作用:在数组的头部(第一个)元素位置处,增加新元素 var arr = [10,20,30]; arr.unshift(40); arr : [40,10,20,30] 3、二维数组 1、什么是二维数组 一个数组中的元素又是一个数组,也可以称之为:数组的数组 2、创建二维数组 var names=[ ["孙悟空","猪八戒","沙悟净"], ["潘金莲","西门庆","武大郎"], ["贾宝玉","刘姥姥","林黛玉"], ["貂蝉","貂蝉","貂蝉"] ]; //获取猪八戒 console.log(names[0][1]); //获取林黛玉 console.log(names[2][2]); 4、作业 1、通过 进出栈 操作,完成 十进制对二进制的转换 1、创建一个函数 decode2bin,接收一个十进制的数字做参数 2、函数体中,将参数 拆成二进制数字,保存在一个数组中 3、将数组的元素使用""连接,并返回 十进制 转 二进制 :除2取余法 num : 5 num % 2 : 结果为 1 num = parseInt(num / 2) : 结果 2 num % 2 : 结果为 0 num = parseInt(num / 2) : 结果 1 num % 2 : 结果为 1 num = parseInt(num / 2) : 结果 0 结果为 0 时则不用再继续 %2 2、根据省份信息,查询城市列表 1、创建一个全局数组,保存几个省份名称 2、创建一个全局二维数组,保存不同省份中的城市信息(数据要与省份数组中的数据对应的上) 3、创建一个函数,接收一个省份名称做参数,打印该省份中对应的所有的城市信息

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值